<template>
  <div class="main-body">
    <div id="list">
      <div id="list_bg"></div>
      <div class="top" id="top">
        <div class="lunaSearch">
          <a onclick="" class="logo clickreport-luna-logo"
            ><img src="" alt=""
          /></a>
          <div class="searchTxtarea">
            <a onclick="" href="" class="city"><i>郑州</i></a>
            <span data-listtouchtag="lunalist_search_3">
              <form>
                <input
                  type="text"
                  class="searchArea"
                  disabled="disabled"
                  placeholder="找工作 找房子 找搬家"
                />
              </form>
            </span>
          </div>
        </div>
        <div class="filter">
          <ul class="filter_title">
            <li data-listtouchtag="lunalist_a_1"><span>区域</span></li>
            <li data-listtouchtag="lunalist_a_2"><span>类别</span></li>
            <li data-listtouchtag="lunalist_a_3"><span>价格</span></li>
          </ul>
          <div class="filterContainer"><div class="filterBox"></div></div>
        </div>
      </div>
      <div class="list">
        <ul
          v-infinite-scroll="load"
          id="list-wrapper"
          :infinite-scroll-disabled="scroll.disabled"
          :infinite-scroll-distance="50"
          :infinite-scroll-delay="300"
          class="list-demo"
          style="margin-botto2m: 2.3rem; overflow: auto"
        >
          <template v-for="item in dataList">
            <li class="clickreport-luna-post visiblereport-luna-card">
              <a class="list_demo_a" href=""
                ><div class="list_left">
                  <img :src="item.img" />
                </div>
                <dl class="list_right">
                  <dt class="item_title">{{ item.title }}</dt>
                  <dd class="attr-demo">{{ item.city }}</dd>
                  <dd class="thirddd">
                    <span class="price-demo">{{ item.price }} </span>
                    <span class="right_item_label">
                      <span class="list-demo-time">
                        {{ dateFormat(item.date) }}
                      </span>
                    </span>
                  </dd>
                </dl>
              </a>
            </li>
          </template>
        </ul>
      </div>

      <div
        v-show="scroll.loading"
        class="load"
        id="infomore"
        style="display: block"
      >
        <i></i>加载更多
      </div>
      <div v-show="scroll.noMore" id="bottom" style="display: block">
        我是有底线的，没有更多信息啦~
      </div>
    </div>

    
    <div class="searchBox">
      <div class="searchInput">
        <div class="searchTxtarea">
          <a
            href="https://luna.58.com/m/zz/city_new.shtml?-15=20&ampurl=https%3A%2F%2Fluna.58.com%2Flist.shtml%3Fplat%3Dm%26cate%3Dshouji%26-15%3D20%26city%3Dzz%26tag%3Dsale_common_thirdshoujishuma_shouji%26PGTID%3D0d200005-0015-62d8-5909-1d8e5a804c40"
            class="city"
            >郑州</a
          ><span
            ><form
              action="https://luna.58.com/list.shtml?plat=m&ampcate=shouji&amp-15=20&ampcity=zz&amptag=sale_common_thirdshoujishuma_shouji&ampPGTID=0d200005-0015-62d8-5909-1d8e5a804c40"
            >
              <input
                type="text"
                placeholder="找工作 找房子 找搬家"
                class="searchArea"
              /></form
          ></span>
        </div>
        <span class="close">取消</span>
      </div>
      <div class="searchHistory">
        <h2>浏览历史</h2>
        <div class="historyList"></div>
      </div>
      <div class="searchList"></div>
    </div>
  </div>
</template>

<script>
import { getRequirementListApi } from "@/api/webApi.js"
import { ElButton } from "element-plus"
import { dateFormatForList } from "@/utils/common.js"

import Base from "@/pages/BaseComponent"

export default {
  name: "RequirementList",
  extends: Base,
  setup() {},
  created() {
    console.log("page created")
     this.scroll.disabled = false 
     this.load()
  },
  mounted() {
    // 初始化ul元素高度,下拉刷新的组件会有连续加载的问题
    let docHeight = document.documentElement.clientHeight
    let listWrapper = document.getElementById("list-wrapper")
    // let topHeight = document.getElementById('top').clientHeight
    listWrapper.style.height = docHeight + "px" 
  },
  methods: {
    dateFormat: dateFormatForList,
    load() {
      if (this.scroll.disabled) {
        return
      }
      console.log("load")
      this.scroll.loading = true
      this.scroll.disabled = true
      setTimeout(() => {
        getRequirementListApi(this.page)
          .then((res) => {
            let { code, msg, data } = res
            let { rows, count } = data
            if (code == 200) {
              if (rows.length == 0) {
                this.scroll.disabled = true
                this.scroll.noMore = true
              } else {
                this.dataList = this.dataList.concat(rows)
                this.page.pageIndex += 1
              }
            } else {
              // msg
            }
          })
          .catch((err) => {})
          .finally(() => {
            this.scroll.loading = false
            setTimeout(() => {
              this.scroll.disabled = false
            }, 100)
          })
      }, 3000)
    },
  },
  data() {
    return {
      dataList: [
        // {
        //   title: "实体店专业高价回收",
        //   city: "哥伦比亚",
        //   price: "面议",
        //   date: "03-07",
        //   img: "",
        // },
      ],
      scroll: {
        height: 0,
        disabled: true, // 下拉刷新禁用
        distance: 0, // 下拉刷新触发距离
        noMore: false, // 没有更多数据
        loading: false, // 加载中
        delay: 500, // 延迟
        t: null,
      },
      page: {
        pageIndex: 1, // 分页索引
        pageSize: 10, // 分页大小
        // 过滤参数
        filters: {
          city: "哥伦比亚",
          county: "WEIU",
          type: "",
          price: "",
          keyword: "文件覅我",
        },
      },
    }
  },
}
</script>

<style>
/* .list-demo li {
  display: block;
} */

.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

@import url("@/assets/css/list_20_ershou_new_v20170613192207.css"); 
</style>
